{extend name="common/__base" /}
{block name="css"}
<style>
    body {
        background-color: #fff;
        background-image:url(/static/admin/image/background_1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: #111;
        text-align: center;
        width: 100vw;
        font-weight: 700;
        overflow: hidden;
        font-family: 'Montserrat', sans-serif;
    }

    #fly-in {
        font-size: 4em;
        margin: 40vh auto;
        height: 20vh;
        text-transform: uppercase;
    }

    #fly-in span {
        display: block;
        font-size: .4em;
        opacity: .8;
    }

    #fly-in div {
        position: absolute;
        margin: 2vh 0;
        opacity: 0;
        left: 10vw;
        width: 80vw;
        animation: switch 16s linear infinite;
    }

    #fly-in div:nth-child(2) { animation-delay: 4s}
    #fly-in div:nth-child(3) { animation-delay: 8s}
    #fly-in div:nth-child(4) { animation-delay: 12s}

    @keyframes switch {
        0% { opacity: 0;filter: blur(20px); transform:scale(12)}
        3% { opacity: 1;filter: blur(0); transform:scale(1)}
        10% { opacity: 1;filter: blur(0); transform:scale(.9)}
        30% { opacity: 0;filter: blur(10px); transform:scale(.1)}
        80% { opacity: 0}
        100% { opacity: 0}
    }
</style>
{/block}
{block name="body"}
<div id="fly-in">
    <div>万动力最新系统即将上线</div>
    <div>欢迎您的使用<span>万动力</span></div>
    <div>万动力最新系统即将上线</div>
    <div>欢迎您的使用<span>万动力</span></div>
</div>
{/block}